<template>
  <div class="cn-block-wrapper">
    <!-- 折叠箭头 -->
    <div v-if="block.style & STYLE_MASK_FOLD" class="cn-fold-wrapper">◢</div>
    <!-- 文本块 -->
    <cn-text-block-content v-if="block.type == 2" :block="block" />
    <cn-heading-block-content v-else-if="block.type >= 3 && block.type <= 11" :block="block" />
    <cn-bullet-block-content v-else-if="block.type == 12" :block="block" />
    <cn-divider-block-content v-else-if="block.type == 22" />
    <cn-board-block-content v-else-if="block.type == 43" :block="block" />
    <div v-if="block.children && block.children.length > 0" class="cn-block-children-wrapper">
      <cn-block v-for="(child, index) in block.children" :key="index" :block="child" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { PropType, toRefs } from 'vue';
import { type CnBlock } from '../types';
import CnTextBlockContent from './cn-text-block-content.vue';
import CnHeadingBlockContent from './cn-heading-block-content.vue';
import CnBulletBlockContent from './cn-bullet-block-content.vue';
import CnDividerBlockContent from './cn-divider-block-content.vue';
import CnBoardBlockContent from './cn-board-block-content.vue';
import { STYLE_MASK_FOLD } from '../util';

const props = defineProps({
  block: {
    type: Object as PropType<CnBlock>,
    required: true,
  },
});
const { block } = toRefs(props);
</script>
